<template>
  <view class="article-detail-page">
    <!-- 文章头部 -->
    <view v-if="articleDetail" class="article-header">
      <view class="article-title">{{ articleDetail.title }}</view>
      <view class="article-meta">
        <view class="meta-item">
          <text class="label">作者：</text>
          <text class="value">{{ articleDetail.author }}</text>
        </view>
        <!-- <view class="meta-item">
          <text class="label">阅读：</text>
          <text class="value">{{ articleDetail.viewCount }}</text>
        </view> -->
        <view class="meta-item">
          <text class="label">发布时间：</text>
          <text class="value">{{ formatTime(articleDetail.createTime) }}</text>
        </view>
      </view>
    </view>

    <!-- 文章内容 -->
    <view v-if="articleDetail" class="article-content">
      <rich-text :nodes="articleDetail.content"></rich-text>
    </view>

    <!-- 加载状态 -->
    <view v-if="isLoading" class="loading-state">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view v-if="error" class="error-state">
      <image class="error-icon" src="/static/icons/culture.png" mode="aspectFit" />
      <text class="error-text">{{ error }}</text>
      <view class="retry-btn" @click="loadArticleDetail">重试</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import CultureAPI, { type CultureContentItem } from "@/api/culture";

// 页面数据
const articleDetail = ref<CultureContentItem | null>(null);
const isLoading = ref(false);
const error = ref("");
const articleId = ref<number>(0);

// 获取文章详情
const loadArticleDetail = async () => {
  if (!articleId.value) return;

  isLoading.value = true;
  error.value = "";

  try {
    const response = await CultureAPI.getCultureContentDetail(articleId.value);

    // request工具已经处理了响应结构，直接使用data
    articleDetail.value = response;
  } catch (err: any) {
    console.error("获取文章详情失败:", err);
    error.value = err.message || "网络请求失败";
  } finally {
    isLoading.value = false;
  }
};

// 格式化时间
const formatTime = (timeStr: string | undefined) => {
  if (!timeStr) return "";
  const date = new Date(timeStr);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "long",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
};

// 页面加载时获取参数
onLoad((options) => {
  if (options && options.id) {
    articleId.value = parseInt(options.id);
    loadArticleDetail();
  } else {
    error.value = "文章ID不存在";
  }
});
</script>

<style lang="scss">
.article-detail-page {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 40rpx;
}

.article-header {
  padding: 40rpx 30rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .article-title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    line-height: 1.4;
    margin-bottom: 24rpx;
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;

    .meta-item {
      display: flex;
      align-items: center;
      font-size: 26rpx;

      .label {
        color: #999;
        margin-right: 8rpx;
      }

      .value {
        color: #666;
      }
    }
  }
}

.article-content {
  padding: 30rpx;
  line-height: 1.8;
  font-size: 30rpx;
  color: #333;

  // 富文本内容样式
  :deep(p) {
    margin-bottom: 20rpx;
  }

  :deep(img) {
    max-width: 100%;
    height: auto;
    border-radius: 8rpx;
    margin: 20rpx 0;
  }

  :deep(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    margin: 30rpx 0 20rpx;
    color: #222;
  }

  :deep(blockquote) {
    background-color: #f8f9fa;
    border-left: 4rpx solid #1989fa;
    padding: 20rpx;
    margin: 20rpx 0;
    border-radius: 0 8rpx 8rpx 0;
  }

  :deep(code) {
    background-color: #f1f3f4;
    padding: 4rpx 8rpx;
    border-radius: 4rpx;
    font-family: "Courier New", monospace;
    font-size: 28rpx;
  }

  :deep(pre) {
    background-color: #f8f9fa;
    padding: 20rpx;
    border-radius: 8rpx;
    overflow-x: auto;
    margin: 20rpx 0;

    code {
      background: none;
      padding: 0;
    }
  }
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;

  .loading-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #1989fa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20rpx;
  }

  .loading-text {
    font-size: 28rpx;
    color: #999;
  }
}

.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;

  .error-icon {
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 30rpx;
    opacity: 0.6;
  }

  .error-text {
    font-size: 28rpx;
    color: #999;
    margin-bottom: 40rpx;
    text-align: center;
  }

  .retry-btn {
    padding: 20rpx 40rpx;
    background-color: #1989fa;
    color: #fff;
    border-radius: 30rpx;
    font-size: 28rpx;
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.95);
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
